<template>
	<view>
		<h3 class="PayTitle">提示：付款金额要与显示的金额一致，否则后果自负</h3>

		<view class="PayAmount">
			<text>￥</text>
			<text>{{pay?pay.price:''}}元</text>
		</view>
		<view class="PayCode">
			<image mode='aspectFit' :src="pay.type?pay.zfbcode:pay.wxcode"/>
		</view>

		<view class="PayInfo">
			<view class="name">订单名称：{{ pay.name }}</view>
			<view class="code">订单号：{{ pay.code }}</view>
			<view class="box">
				<text class="tip">订单支付有效期</text>
				<text class="sec"> {{sec}}秒</text>
			</view>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			money:0,
			type:"",
			business:{},
			pay:{},
			sec:180,
			timer:null,
		}
	},
	onLoad(options){
		this.money = options.money,
		this.type = options.type
		this.business = uni.getStorageSync("business")??{}
		this.getData()
	},
	methods: {
		async getData(){
			let data = {
				money:this.money,
				type:this.type,
				busid:this.business.id
			}
			let result = await uni.$u.http.post('/business/pay',data)
			if(result.code){
				this.pay = JSON.parse(result.data).data
				this.timer = setInterval(this.changeSec,1000)
				return false
			}else{
				this.$refs.notice.show({
					message:result.msg
				})
				return false
			}
		},
		async changeSec(){
			if(this.sec <= 0){
				this.pay.wxcode = '/images/pay/qrcode_timeout.png'
				this.pay.zfbcode = '/images/pay/qrcode_timeout.png'
				clearInterval(this.timer)
			}else{
				this.sec = this.sec-1
			}
			if(this.sec % 5 == 0){
				await this.query()
			}
		},
		// 判断订单是否支付
		async query(){
			let data = {
				payid:this.pay.id,
				busid:this.business.id
			}
			let result = await uni.$u.http.post("/business/query",data)
			if(result.code){
				let status = result.data.status
				if(status == '1'){
					this.$refs.notice.show({
						message:"充值成功",
						duration:1000,
						complete:()=>{
							clearInterval(this.timer)
							uni.$u.route({
								type:'back'
							})
						}
					})
				}
			}
		}
	},
}
</script>


<style>
  :root{
      --van-uploader-size:150px;
      --van-uploader-border-radius:100px;
  }

  .PayTitle{
      text-align: center;
      color:red;
      font-size:1.3em;
      margin-top:2em;
      margin-bottom:1em;
  }

  .PayAmount{
      text-align: center;
      margin-bottom:1em;
  }

  .PayAmount text:first-child{
      font-size:1.6em;
  }

  .PayAmount text:last-child{
      font-size:2.4em;
  }

  .PayCode{
      width:70%;
      margin:0 auto;
  }

  .PayCode image{
      width:100%;
  }

  .PayInfo{
      text-align: center;
      color:#000;
      font-size:1.2em;
      font-weight: bold;
  }

  .PayInfo .box{
      margin-top:1em;
  }

  .PayInfo .box text{
      background: #3ec742;
      color: #fff;
      line-height: 25px;
      font-size: 15px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }
</style>